<template>
	<view @click.stop="closeLay">
		<view class="sm-border margin radius" style="background-color: #fff;">
			<view class="padding flex align-center">
				<text class="padding-right-sm">机台编号</text>
				<view style="width: 70%;">
					<selectLay ref="selectLay" :value="devIds" placeholder="请输入机台号(可多选)" name="name" :options="devList"
						@selectitem="selectitem" @change="change" svalue="id" slabel="num"></selectLay>
				</view>
			</view>
			<view class="padding flex align-center">
				<text class="padding-right-sm">换布时间</text>
				<view class="flex" style="width: 70%;">
					<view style="background-color: #eee;color: black;padding: 16rpx 50rpx 16rpx 50rpx;">{{ dateC }}
					</view>
					<view
						style="background-color: #eee;color: black;margin-left: auto;padding: 16rpx 50rpx 16rpx 50rpx;">
						{{ timeC }}
					</view>
				</view>
			</view>
			<view class="padding flex align-center">
				<text class="padding-right-sm">客户名称</text>
				<view style="width: 70%;">
					<uni-data-select placeholder="请选择客户" :localdata="customers" @change="getCusTask">
					</uni-data-select>
				</view>
			</view>
			<view class="padding flex align-center">
				<text class="padding-right-sm">订单任务</text>
				<view style="width: 70%;">
					<uni-data-select placeholder="请选择任务" :localdata="tasks" @change="changeCloth">
					</uni-data-select>
				</view>
			</view>
			<view class="padding flex align-center">
				<text class="padding-right-sm">布种名称</text>
				<view class="flex align-center clothInfo">
					{{ hasSelect.clName }}
				</view>
			</view>
			<view class="padding flex align-center">
				<text class="padding-right-sm">布种类型</text>
				<view class="flex align-center clothInfo">
					{{ hasSelect.clType }}
				</view>
			</view>
			<view class="padding flex align-center">
				<text class="padding-right-sm">布种单价</text>
				<view class="flex align-center clothInfo">
					{{ hasSelect.clPrice }}
					<view style="margin-left: auto;width: 30%;color: mediumvioletred;">元 / 圈</view>
				</view>
			</view>

		</view>

		<view class='placeholder-view'></view>
		<view class="bg-white padding-tb-sm" style="position: fixed;bottom: 0;text-align: center;width: 100%;">
			<button class="cu-btn line-mauve round lg margin-right" style="width: 35%;" @click="reset()">重置</button>
			<button class="cu-btn bg-mauve round lg margin-left" style="width: 35%;" @click="bindCloth()">更换布种</button>
		</view>
	</view>
</template>

<script>
	import selectLay from './selectLay.vue'
	import {
		selectMulDev
	} from '@/api/company/device.js'
	import {
		selectMulclo,
		getAllTaskByCusId
	} from '@/api/cloth/fzCloth.js'
	import {
		updateTask
	} from '@/api/record/record.js'
	import moment from 'moment';
	import {
		getCusList
	} from "@/api/system/user.js";
	import {
		values
	} from 'lodash';

	export default {
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.query.pageNum = 1
			this.pullTask()
		},
		/**
		 * 上拉获取更多
		 */
		onReachBottom() {

		},
		components: {
			selectLay
		},
		data() {
			return {
				baseFormData: {},
				customers: [],
				tasks: [],
				taskId: null,
				devIds: [],
				customersId: null,
				clothList: [],
				hasSelect: {
					clName: "选择任务后自动带入",
					clPrice: 0,
					clType: "选择任务后自动带入",
					text: "选择任务后自动带入",
					value: null,
				},
				devList: [],
				range: [],
				dateC: moment(new Date()).format("YYYY-MM-DD"),
				timeC: moment(new Date()).format("HH:mm"),
				queryCloth: {
					companyId: this.$store.getters.companyId,
				},
				mapCloth: {
					text: 'clName',
					value: 'clId'
				}
			}
		},
		created() {
			this.getCustomers()
		},
		mounted() {
			this.getDevList()
		},
		methods: {
			selectitem() {

			},
			closeLay() {
				this.$refs.selectLay.close()
			},
			//查询客户的任务
			getCusTask(e) {
				this.tasks = []
				this.taskId = null
				this.resetHasSelect()
				if (e) {
					this.customersId = e
					getAllTaskByCusId(e).then(res => {
						this.tasks = res.data;
					})
				}
			},

			//查询客户列表
			getCustomers() {
				let comId = this.$store.getters.companyId;
				let query = {
					userType: "3",
					companyId: comId,
				};
				getCusList(query).then((res) => {
					let datas = [];
					res.rows.forEach((t) => {
						datas.push({
							value: t.userId,
							text: t.nickName
						});
					});
					this.customers = datas;
				});
			},
			//重置
			reset() {
				this.resetHasSelect()
				this.taskId = null
				this.customersId = null
				this.$refs.selectLay.handleRemove(null)
				this.dateC = moment(new Date()).format("YYYY-MM-DD")
				this.timeC = moment(new Date()).format("HH:mm")
			},

			//重置以选布种
			resetHasSelect() {
				this.hasSelect = {
					clName: "选择任务后自动带入",
					clPrice: 0,
					clType: "选择任务后自动带入",
					text: "选择任务后自动带入",
					value: null,
				}
			},

			//更换布种
			bindCloth() {
				if (this.devIds.length == 0) {
					this.$modal.msg("至少选择一台设备!")
				} else if (this.customersId == null) {
					this.$modal.msg("请选择客户!")
				} else if (this.taskId == null) {
					this.$modal.msg("请选择任务!")
				} else {
					updateTask({
						taskId: this.taskId,
						devId: this.devIds
					}).then(res => {
						if (res.code === 200) {
							this.$modal.msgSuccess(res.msg)
							this.reset()
						}
					})
				}
			},

			//选择机台编号
			change(item, value) {
				this.devIds = value;
			},

			changeCloth(e) {
				this.resetHasSelect()
				if (e) {
					this.taskId = e
					this.hasSelect = _.find(this.tasks, function(o) {
						return o.value == e;
					});
				}
			},

			getDevList() {
				selectMulDev(this.queryCloth).then(res => {
					this.devList = res.rows
				})
			},

			/**
			 * 修改机台绑定的任务状态
			 */
			devBindTask(data) {
				uni.showLoading()
				updateTask(data).then(res => {
					uni.hideLoading()
					let num = res.data
					if (num == 0) {
						this.$modal.msgSuccess("更换成功")
					} else if (num == 1) {
						this.$modal.msgError("设备未激活")
					} else if (num == 2) {
						this.$modal.msgError("设备离线")
					} else if (num == 3) {
						this.$modal.msgError("设备正在运行")
					} else if (num == 4) {
						this.$modal.msgError("已绑定此任务！")
					} else if (num == -1) {
						uni.showLoading({
							title: '无效的二维码'
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.placeholder-view {
		width: 100%;
		height: 150rpx;
	}

	.clothInfo {
		width: 70%;
		background-color: #eee;
		color: black;
		padding: 16rpx 50rpx 16rpx 50rpx;
	}
</style>
